import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import { Hero, HeroService }  from './hero.service';




@Component({
  moduleId: module.id,
  template: ` <h2>HEROES</h2>
   <ul class="items">
      <li *ngFor="let hero of heroes "
       [class.selected]="hero === selectedHero"
       (click)="onSelect(hero)">
      
        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
      </li>
    </ul>
     <button (click)="gotoDetail()">View Details</button>

 

  `,
  //styleUrls:["../style.css"]
})

export class HeroListComponent implements OnInit { 
	heroes:Hero[]=[];

	selectedId: number;

  selectedHero:Hero;

	constructor(
		private service: HeroService,
    private router: Router,
		){}

	ngOnInit() {
		this.service.getHeroes().then(heroes => this.heroes = heroes);
	}

	isSelected(hero: Hero) { return hero.id === this.selectedId; }

  onSelect(hero: Hero){
    this.selectedHero=hero;
  }

  gotoDetail(){
    this.router.navigate(['/hero', this.selectedHero.id]);
  }
}